<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
            function a1() {
                $.ajax({
                    url:"${pageContext.request.contextPath}/t3",
                    data:{"name":$("#username").val()},
                    success:(data)=>{
                        if (data!="ok"){
                            $("#userInfo").removeClass("glyphicon glyphicon-ok")
                            $("#userInfo").addClass("glyphicon glyphicon-remove")
                            $("#UserHelpInfo").css("color","red");
                            $("#UserHelpInfo").html("用户名不符合规范");

                        }else {
                            $("#userInfo").removeClass("glyphicon glyphicon-remove")
                            $("#userInfo").addClass("glyphicon glyphicon-ok")
                            $("#UserHelpInfo").css("color","green");
                            $("#UserHelpInfo").html("用户名符合规范");
                        }
                    }
                })
            }
            
            function a2() {
                $.ajax({
                    url:"${pageContext.request.contextPath}/t3",
                    data:{"pwd":$("#password").val()},
                    success:(data)=>{
                        if (data!="ok"){
                            $("#pwdInfo").removeClass("glyphicon glyphicon-ok")
                            $("#pwdInfo").addClass("glyphicon glyphicon-remove")
                            $("#pwdHelpInfo").css("color","red");
                            $("#pwdHelpInfo").html("密码输入不规范")
                        }else {
                            $("#pwdInfo").removeClass("glyphicon glyphicon-remove")
                            $("#pwdInfo").addClass("glyphicon glyphicon-ok")
                            $("#pwdHelpInfo").css("color","green");
                            $("#pwdHelpInfo").html("密码输入符合要求")
                        }

                    }
                })
            }

    </script>
</head>
<body>
    <div class="container">
        <from class="form-horizontal float-left">
            <div class="form-group">
                <label for="username" class=" col-md-2 control-label">用户名:</label>
                <div class="input-group col-md-5">
                    <input type="text" id="username" class="form-control" aria-describedby="userInfo" onblur="a1()">
                    <span id="userInfo" class="input-group-addon"></span>
                </div>
                <span id="UserHelpInfo" class="col-md-offset-2"> </span>
            </div>

            <div class="form-group">
                <label for="password" class="control-label col-md-2">密码:</label>
                <div class="input-group col-md-5">
                    <input type="password" id="password" class="form-control" aria-describedby="pwdInfo" onblur="a2()">
                    <span id="pwdInfo" class="input-group-addon"></span>
                </div>
                <span id="pwdHelpInfo" class="col-md-offset-2"> </span>
            </div>
        </from>
    </div>

</body>
</html>
